/**
 * Mega pixel image rendering library for iOS6 Safari
 *
 * Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel),
 * which causes unexpected subsampling when drawing it in canvas.
 * By using this library, you can safely render the image with proper stretching.
 *
 * Copyright (c) 2012 Shinichi Tomita <shinichi.tomita@gmail.com>
 * Released under the MIT license
 */

/**
 * modified by qzone touch team
 *
 * advance the url getting method `getImageURL` for some browsers in China like uc, have a serious bug by calling the method of `createObjectURL`
 */
define(function(require) {

	var $ = require('zepto');


	/**
	 * Detect subsampling in loaded image.
	 * In iOS, larger images than 2M pixels may be subsampled in rendering.
	 */
	function detectSubsampling(img) {
		var iw = img.naturalWidth, ih = img.naturalHeight;
		if (iw * ih > 1024 * 1024) { // subsampling may happen over megapixel image
			var canvas = document.createElement('canvas');
			canvas.width = canvas.height = 1;
			var ctx = canvas.getContext('2d');
			ctx.drawImage(img, -iw + 1, 0);
			// subsampled image becomes half smaller in rendering size.
			// check alpha channel value to confirm image is covering edge pixel or not.
			// if alpha value is 0 image is not covering, hence subsampled.
			return ctx.getImageData(0, 0, 1, 1).data[3] === 0;
		} else {
			return false;
		}
	}

	/**
	 * Detecting vertical squash in loaded image.
	 * Fixes a bug which squash image vertically while drawing into canvas for some images.
	 */
	function detectVerticalSquash(img, iw, ih) {
		var canvas = document.createElement('canvas');
		canvas.width = 1;
		canvas.height = ih;
		var ctx = canvas.getContext('2d');
		ctx.drawImage(img, 0, 0);
		var data = ctx.getImageData(0, 0, 1, ih).data;
		// search image edge pixel position in case it is squashed vertically.
		var sy = 0;
		var ey = ih;
		var py = ih;
		while (py > sy) {
			var alpha = data[(py - 1) * 4 + 3];
			if (alpha === 0) {
				ey = py;
			} else {
				sy = py;
			}
			py = (ey + sy) >> 1;
		}
		var ratio = (py / ih);
		return (ratio===0)?1:ratio;
	}

	/**
	 * Rendering image element (with resizing) and get its data URL
	 */
	function renderImageToDataURL(img, options, doSquash) {
		var canvas = document.createElement('canvas');
		renderImageToCanvas(img, canvas, options, doSquash);
		return canvas.toDataURL("image/jpeg", options.quality || 0.8);
	}

	/**
	 * Rendering image element (with resizing) into the canvas element
	 */
	function renderImageToCanvas(img, canvas, options, doSquash) {
		var iw = img.naturalWidth, ih = img.naturalHeight;
		var width = options.width, height = options.height;
		var ctx = canvas.getContext('2d');
		ctx.save();
		transformCoordinate(canvas, width, height, options.orientation);
		var subsampled = detectSubsampling(img);
		if (subsampled) {
			iw /= 2;
			ih /= 2;
		}
		var d = 1024; // size of tiling canvas
		var tmpCanvas = document.createElement('canvas');
		tmpCanvas.width = tmpCanvas.height = d;
		var tmpCtx = tmpCanvas.getContext('2d');
		var vertSquashRatio = doSquash ? detectVerticalSquash(img, iw, ih) : 1;
		var dw = Math.ceil(d * width / iw);
		var dh = Math.ceil(d * height / ih / vertSquashRatio);
		var sy = 0;
		var dy = 0;
		while (sy < ih) {
			var sx = 0;
			var dx = 0;
			while (sx < iw) {
				tmpCtx.clearRect(0, 0, d, d);
				tmpCtx.drawImage(img, -sx, -sy);
				ctx.drawImage(tmpCanvas, 0, 0, d, d, dx, dy, dw, dh);
				sx += d;
				dx += dw;
			}
			sy += d;
			dy += dh;
		}
		ctx.restore();
		tmpCanvas = tmpCtx = null;
	}

	/**
	 * Transform canvas coordination according to specified frame size and orientation
	 * Orientation value is from EXIF tag
	 */
	function transformCoordinate(canvas, width, height, orientation) {
		switch (orientation) {
			case 5:
			case 6:
			case 7:
			case 8:
				canvas.width = height;
				canvas.height = width;
				break;
			default:
				canvas.width = width;
				canvas.height = height;
		}
		var ctx = canvas.getContext('2d');
		switch (orientation) {
			case 2:
				// horizontal flip
				ctx.translate(width, 0);
				ctx.scale(-1, 1);
				break;
			case 3:
				// 180 rotate left
				ctx.translate(width, height);
				ctx.rotate(Math.PI);
				break;
			case 4:
				// vertical flip
				ctx.translate(0, height);
				ctx.scale(1, -1);
				break;
			case 5:
				// vertical flip + 90 rotate right
				ctx.rotate(0.5 * Math.PI);
				ctx.scale(1, -1);
				break;
			case 6:
				// 90 rotate right
				ctx.rotate(0.5 * Math.PI);
				ctx.translate(0, -height);
				break;
			case 7:
				// horizontal flip + 90 rotate right
				ctx.rotate(0.5 * Math.PI);
				ctx.translate(width, -height);
				ctx.scale(-1, 1);
				break;
			case 8:
				// 90 rotate left
				ctx.rotate(-0.5 * Math.PI);
				ctx.translate(-width, 0);
				break;
			default:
				break;
		}
	}

	// base on the browser market in China ,
	// a browser named uc has a serious bug at version 8.4:
	// using the api `createObjectURL` would always return the same url of first called.
	// so we try using the canvas.toDataUrl to get a url
	function getURLObject() {
		// notice that the official zepto does not detect some Specific browsers which mostly appear in china, like uc. so we are uisng a zepto of qzone touch version.
		if ($.browser.uc && $.browser.version == "8.4") {
			return null;
		}
		return window.URL || window.webkitURL || window.mozURL
	}

	function getImageURL(srcImage, callback) {
		if (srcImage instanceof Blob) {
			var URL = getURLObject();
			if (URL) {
				callback(URL.createObjectURL(srcImage));
			} else {
				var r = new FileReader;
				r.onload = function (event) {
					callback(event.target.result)
				};
				r.onerror = function (event) {
					callback(null)
				};
				r.readAsDataURL(srcImage)
			}
		}
	}



	/**
	 * MegaPixImage class
	 */
	function MegaPixImage(srcImage) {
		var self = this;
		getImageURL(srcImage, function(src){
			if (!src) { throw Error("can't create url"); }
			var img = new Image();
			img.src = src;
			self.blob = srcImage;
			srcImage = img;
			if (!srcImage.naturalWidth && !srcImage.naturalHeight) {
				var _this = self;
				srcImage.onload = function() {
					var listeners = _this.imageLoadListeners;
					if (listeners) {
						_this.imageLoadListeners = null;
						for (var i=0, len=listeners.length; i<len; i++) {
							listeners[i]();
						}
					}
				};
				self.imageLoadListeners = [];
			}
			self.srcImage = srcImage;
		});

	}

	/**
	 * Rendering megapix image into specified target element
	 */
	MegaPixImage.prototype.render = function(target, options) {
		if (this.imageLoadListeners) {
			var _this = this;
			this.imageLoadListeners.push(function() { _this.render(target, options) });
			return;
		}
		options = options || {};
		var imgWidth = this.srcImage.naturalWidth, imgHeight = this.srcImage.naturalHeight,
			width = options.width, height = options.height,
			maxWidth = options.maxWidth, maxHeight = options.maxHeight,
			doSquash = !this.blob || this.blob.type === 'image/jpeg';

		if (width && !height) {
			height = (imgHeight * width / imgWidth) << 0;
		} else if (height && !width) {
			width = (imgWidth * height / imgHeight) << 0;
		} else {
			width = imgWidth;
			height = imgHeight;
		}
		if (maxWidth && width > maxWidth) {
			width = maxWidth;
			height = (imgHeight * width / imgWidth) << 0;
		}
		if (maxHeight && height > maxHeight) {
			height = maxHeight;
			width = (imgWidth * height / imgHeight) << 0;
		}
		var opt = { width : width, height : height };
		for (var k in options) opt[k] = options[k];

		var tagName = target.tagName.toLowerCase();
		if (tagName === 'img') {
			target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
		} else if (tagName === 'canvas') {
			renderImageToCanvas(this.srcImage, target, opt, doSquash);
		}
		if (typeof this.onrender === 'function') {
			this.onrender(target);
		}
	};

	/**
	 * Export class to global
	 */
	return MegaPixImage;

});